<script setup lang='ts'>
</script>
<template>
  <div class="max-w-80% mx-auto bg-white rounded-xl shadow-md overflow-hidden tablet:max-w-2xl">
    <div class="tablet:flex">
      <div class="tablet:shrink-0">
        <img class="h-48 w-full object-cover tablet:h-full tablet:w-48"
          src="https://images.unsplash.com/photo-1637734433731-621aca1c8cb6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=404&q=80"
          alt="Modern building architecture">
      </div>
      <div class="p-8">
        <div class="uppercase tracking-wide text-sm text-indigo-500 font-semibold">Company retreats</div>
        <a href="#" class="block mt-1 text-lg leading-tight font-medium text-black hover:underline">Incredible
          accommodation for your team</a>
        <p class="mt-2 text-slate-500">Looking to take your team away on a retreat to enjoy awesome food and take in
          some sunshine? We have a list of places to do just that.</p>
      </div>
    </div>
  </div>
</template>

<style scoped></style>
